<template>
  <div class="main order-wrapper">
    <div class="main-hd">
      <h2>{{ $t('m.orderGid') }}</h2>
    </div>
    <div class="main-hd"></div>
    <div class="content-wrap">
      <div class="form-inline" style="margin-bottom: 30px;">
        <div class="items">
          <div class="label">{{$t('m.applyTime')}}</div>
          <DatePicker v-model="time1" type="daterange" :options="disDate" format="yyyy-MM-dd" @on-change="timeChange" :placeholder="$t('m.applyTime')" class="ivu-input-w200"></DatePicker>
        </div>
        <div class="items">
          <div class="label">{{$t('m.rLt')}}</div>
          <DatePicker v-model="time2" type="daterange" :options="disDate" format="yyyy-MM-dd" @on-change="passTimeChange" :placeholder="$t('m.rLt')" class="ivu-input-w200"></DatePicker>
        </div>
        <div class="items">
          <div class="label">{{$t('m.sptime')}}</div>
          <DatePicker v-model="time3" type="daterange" :options="disDate1" @on-change="expireChange" format="yyyy-MM-dd" :placeholder="$t('m.sptime')" class="ivu-input-w200"></DatePicker>
        </div>
        <div class="items">
          <div class="label">{{$t('m.cName')}}</div>
          <Input type="text" class="ivu-input-w200" v-model="name" :placeholder="$t('m.cName')" />
        </div>
        <div class="items">
          <div class="label">{{$t('m.phone')}}</div>
          <Input type="text" class="ivu-input-w200" :placeholder="$t('m.phone')" v-model="search.phone" />
        </div>
        <div class="items">
          <div class="label">{{$t('m.zsry')}}</div>
          <Select clearable filterable v-model="search.checkerFirst" class="ivu-input-w200" :placeholder="$t('m.zsry')">
            <Option value>{{this.$t('m.entire')}}</Option>
            <Option v-for="item in firstList" :value="item.account" :key="item.account">{{ item.account }}</Option>
          </Select>
        </div>
        <div class="items">
          <div class="label">{{$t('m.Finalreviewer')}}</div>
          <Select clearable filterable v-model="search.checkerFinal" class="ivu-input-w200" :placeholder="$t('m.Finalreviewer')">
            <Option value>{{this.$t('m.entire')}}</Option>
            <Option v-for="item in lastList" :value="item.account" :key="item.account">{{ item.account }}</Option>
          </Select>
        </div>
        <div class="items">
          <div class="label">{{$t('m.orderGid')}}</div>
          <Input type="text" class="ivu-input-w200" v-model="orderNum" :placeholder="$t('m.orderGid')" />
        </div>

        <div class="items">
          <div class="label">{{$t('m.ApprovalStatus')}}</div>
          <Select clearable filterable v-model="search.orderCheckingStatus" class="ivu-input-w200" :placeholder="$t('m.ApprovalStatus')">
            <Option value>{{this.$t('m.entire')}}</Option>
            <Option value="checking_machine">{{this.$t('m.checking_machine')}}</Option>
            <Option value="reject_machine">{{this.$t('m.jīshěnjùjué')}}</Option>
            <Option value="waiting_to_pick">{{this.$t('m.waiting_to_pick')}}</Option>
            <Option value="checking_first">{{this.$t('m.checking_first')}}</Option>
            <Option value="reject_first">{{this.$t('m.reject_first')}}</Option>
            <Option value="hanging_first">{{this.$t('m.hanging_first')}}</Option>
            <Option value="pass_first">{{this.$t('m.pass_first')}}</Option>
            <Option value="checking_final">{{this.$t('m.checking_final')}}</Option>
            <Option value="pass">{{this.$t('m.pass')}}</Option>
            <Option value="reject_final">{{this.$t('m.reject_final')}}</Option>
          </Select>
        </div>

        <div class="items">
          <div class="label">{{$t('m.OrderStatus')}}</div>
          <Select clearable filterable v-model="search.orderStatusLoan" class="ivu-input-w200" :placeholder="$t('m.OrderStatus')">
            <Option value>{{this.$t('m.entire')}}</Option>
            <Option value="paying">{{this.$t('m.paying')}}</Option>
            <Option value="pay_fail">{{this.$t('m.pay_fail')}}</Option>
            <Option value="pay_cancel">{{this.$t('m.pay_cancel')}}</Option>
            <Option value="paid">{{this.$t('m.paid')}}</Option>
            <Option v-if="countryName=='PHH'" value="waitwithdraw">{{this.$t('m.Dàiqǔkuǎn')}}</Option>
            <Option value="pre_repaid">{{this.$t('m.pre_repaid')}}</Option>
            <Option value="repaid">{{this.$t('m.repaid')}}</Option>
          </Select>
        </div>

        <div class="items">
          <div class="label">{{$t('m.ynOverdue')}}</div>
          <Select clearable class="ivu-input-w200" v-model="overdue" :placeholder="$t('m.ynOverdue')">
            <Option value>{{this.$t('m.entire')}}</Option>
            <Option value="1">{{this.$t('m.yes')}}</Option>
            <Option value="0">{{this.$t('m.no')}}</Option>
          </Select>
        </div>

        <div class="items">
          <div class="label">{{$t('m.userType')}}</div>
          <Select clearable class="ivu-input-w200" v-model="search.isFirst" :placeholder="$t('m.userType')">
            <Option value>{{this.$t('m.entire')}}</Option>
            <Option value="1">{{this.$t('m.shǒucìjièkuǎn')}}</Option>
            <Option value="0">{{this.$t('m.Ngàymai')}}</Option>
          </Select>
        </div>

        <div class="items">
          <div class="label">{{$t('m.yònghùděngjí')}}</div>
          <Select clearable v-model="search.levelId" class="ivu-input-w200" :placeholder="this.$t('m.yònghùděngjí')">
            <Option :value="''">{{ $t("m.entire") }}</Option>
            <Option v-for="item in userDataClass" :value="item.levelId">{{item.levelName}}</Option>
          </Select>
        </div>
        <br>
        <div style="margin-top:20px;">
          <Button class="search_btn" @click="emptyQueryInfo">{{$t('m.recycle')}}</Button>
          <Button class="search_btn" @click="handleFilterReset" type="primary">{{$t('m.cháxún')}}</Button>

        </div>
        <!-- <div class="items">
        </div> -->
      </div>
      <Table ref="orderTable" border :columns="orderColumns" :data="orderList" :loading="orderLoading" @on-selection-change="handleOrderSelect">

        <template slot-scope="{ row, index }" slot="orderCheckingStatus">
          <span v-if="row.orderCheckingStatus == 'reject_machine'">
            <Tooltip :content="row.rejectReason" max-width="200" placement="right">
              {{orderCheckingStatusObj[row.orderCheckingStatus]}}
              <Icon type="md-help-circle" color="red" />
            </Tooltip><br><br>

          </span>
          <span v-else>{{orderCheckingStatusObj[row.orderCheckingStatus]}}</span>
        </template>
      </Table>

      <div class="operator-tools" v-show="orderList.length >0">
        <Button type="primary" @click="handleSelectAll(true)">{{ $t('m.quánxuǎn') }}</Button>
        <Button type="error" @click="handleSelectAll(false)">{{ $t('m.qǔxiāoquánxuǎn') }}</Button>
        <Poptip v-model="batchVisible" confirm :title="this.$t('m.nínquèrènfāhuízhètiáodìngdānma')" @on-ok="handleBatchWithhold" @on-cancel="cancel">
          <i-button v-show="batchData.length > 0" style="background: #efac00;color: whitesmoke;">{{ $t('m.sendBack') }}</i-button>
        </Poptip>
      </div>

      <Modal v-model="modal11" :title="this.$t('m.dìngdānfāhuíxiángqíngyè')" @on-ok="handleBatchWithholdOk" @on-cancel="handleBatchWithholdOk">
        <table class="table table-hover table-condensed" border>
          <tbody>
            <tr v-show="orderGidReturnObj.editTotalNumbers">
              <td>{{ $t('m.fāhuízǒngtiáoshù') }}</td>
              <td>{{orderGidReturnObj.editTotalNumbers}}</td>
            </tr>
            <tr v-show="orderGidReturnObj.succTotalNumbers">
              <td>{{ $t('m.fāhuíchénggōngtiáoshù') }}</td>
              <td>{{orderGidReturnObj.succTotalNumbers}}</td>
            </tr>
            <tr v-show="orderGidReturnObj.failTotalNumbers">
              <td>{{ $t('m.fāhuíshībàitiáoshù') }}</td>
              <td>{{orderGidReturnObj.failTotalNumbers}}</td>
            </tr>
          </tbody>
        </table>
      </Modal>

      <div style="margin-top: 5px;text-align: right;display: inline-block;float: right;">
        <Page :total="loan_list_size" :current.sync="page" :page-size-opts="[10, 20, 40, 80, 100, 200, 400, 600, 800, 1000]" show-total show-elevator show-sizer @on-change="pageChange" @on-page-size-change="handleSizeChange" style="margin: 15px 0;"></Page>
      </div>
      <!-- 订单列表 end -->
    </div>

    <!-- 通知消息弹出层 begin -->
    <!-- <Modal v-model="detailsVisible" :title="this.$t('m.oDetails')" width="1200" :footer-hide="true">
      <div slot="header" class="detailsVisible_Close" v-if="detailPayment.paymentStatus=='payFail'">
        <h3>{{this.$t('m.oDetails')}}</h3>
        <Button type="warning" @click="detailsVisibleReturn(detailPayment.orderGid)">{{this.$t('m.guānbìfāhuí')}}</Button>
      </div>
      <div class="detailPayment">
        <h2>{{this.$t('m.orderGidInfo')}}</h2>
        <ul class="paymentUl">
          <li><em>{{ $t('m.orderGid') }}：</em><span>{{detailPayment.orderGid}}</span></li>
          <li><em>{{this.$t('m.sptime')}}：</em><span>{{detailPayment.dueDate}}</span></li>
          <li><em>{{this.$t('m.userName')}}：</em><span>{{detailPayment.fullName}}</span></li>
          <li><em>{{this.$t('m.phone')}}：</em><span>{{detailPayment.phone}}</span></li>
          <li><em>{{this.$t('m.jiekuanfangshi')}}：</em><span>{{detailPayment.payChannelName}}</span></li>
          <li><em>{{this.$t('m.diànzǐqiánbāozhànghào')}}：</em><span v-if="detailPayment.payChannelId == '6' || detailPayment.payChannelId == '7'">{{detailPayment.accountNo}}</span></li>
          <li><em>{{this.$t('m.BcardN')}}：</em><span v-if="detailPayment.payChannelId == '5'">{{detailPayment.accountNo}}</span></li>
          <li><em>{{this.$t('m.Bname')}}：</em><span>{{detailPayment.bankName}}</span></li>
          <li><em>{{this.$t('m.loanMount')}}：</em><span>{{detailPayment.loanAmount}}</span></li>
          <li><em>{{this.$t('m.loanTimeLimit')}}：</em><span v-if="detailPayment.loanDays">{{detailPayment.loanDays}}day</span></li>
          <li><em>{{this.$t('m.moneyrate')}}：</em><span>{{detailPayment.interest}}</span></li>
          <li><em>{{this.$t('m.Firstinstance')}}：</em><span>{{detailPayment.checkerFirst}}</span></li>
          <li><em>{{this.$t('m.Finalreviewer')}}：</em><span>{{detailPayment.checkerFinal}}</span></li>
        </ul>

        <h2>{{this.$t('m.tranState')}}</h2>
        <ul class="paymentUl">
          <li><em>{{this.$t('m.rLt')}}：</em><span>{{detailPayment.timePay}}</span></li>
          <li><em>{{this.$t('m.TransferStatus')}}：</em>
            <span>{{loadStateArr[detailPayment.paymentStatus]}}</span>
            <span style="color:red;margin-left:20px;" v-show="detailPayment.paymentStatus=='payFail'">({{this.$t('m.shībàiysuányīn')}}:{{detailPayment.payChannelReMess}}) </span>
          </li>
        </ul>

        <h2>{{this.$t('m.bill')}}</h2>
        <ul class="paymentUl">
          <li><em>{{this.$t('m.repayMuch')}}：</em><span>{{ detailPayment.toBeRepaidAmount }}</span></li>
          <li><em>{{this.$t('m.jiǎnmiǎnjīné')}}：</em><span>{{ detailPayment.reductionAmount }}</span></li>
          <li><em>{{this.$t('m.alreadyPM')}}：</em><span>{{ detailPayment.repaidAmount }}</span></li>
          <li><em>{{this.$t('m.awaitPM')}}：</em><span>{{ detailPayment.remainingRepaidAmount }}</span></li>
          <li><em>{{this.$t('m.repayCreat')}}：</em><span>{{ repaymentStatusArray[detailPayment.repaymentStatus] }}</span></li>
          <li><em>{{this.$t('m.ClosingTime')}}：</em><span>{{ detailPayment.timeRepay }}</span></li>
          <li><em>{{this.$t('m.ynOverdue')}}：</em><span>{{ detailPayment.overDueDays == 0 ? this.$t('m.overdueState0') : this.$t('m.overdueState1')}} </span></li>
          <li><em>{{this.$t('m.overdueDay')}}：</em>
            <span>{{detailPayment.overDueDays}}</span>
          </li>
          <li><em>{{this.$t('m.penaltyRate')}}：</em>
            <span>{{ detailPayment.interestFine }}</span>
          </li>
        </ul>

        <h2>{{this.$t('m.payRecord')}}</h2>
        <div class="paymentUl">
          <Table ref="rtable" border :data="rdata" :columns="rcolumns" :loading="rloading">
          </Table>
        </div>

      </div>
    </Modal>-->
    <orderDetailModal :detailPayment="detailPayment" :visible="detailsVisible" :rdata="rdata" :rloading="rloading" @onCancel="onCancelDetailModal"></orderDetailModal>
    <!-- 通知消息弹出层 end -->

    <!-- 线下还款 begin-->
    <Modal v-model="repayModal" :title="$t('m.huánkuǎnjípíngzhàng')" :styles="{ top: '20px' }" :footer-hide="true" width="800" :mask-closable="false">
      <Tabs v-model="repayTab">
        <TabPane :label="$t('m.setting')" name="repay">
          <Form ref="repayForm" :model="repayForm" :rules="repayRules" :label-width="250" class="base-form">
            <FormItem :label="$t('m.dìngdānbiānhào')">
              <span>{{orderGidSet}}</span>
            </FormItem>
            <FormItem :label="$t('m.shèngyúhuánkuǎnjīné')">
              <span>{{remainingRepaidAmountSet}}</span>
            </FormItem>
            <FormItem :label="$t('m.shíjìhuánkuǎnjīné')" prop="repayAmount">
              <Input type="text" :placeholder="$t('m.repayMuch')" v-model.trim="repayForm.repayAmount" number></Input>
            </FormItem>
            <FormItem :label="$t('m.jiǎnmiǎnjīné')" prop="reductionAmount">
              <Input type="text" :placeholder="$t('m.repayMuch')" v-model.trim="repayForm.reductionAmount" number></Input>
            </FormItem>
            <FormItem :label="$t('m.repayTime')" prop="repayDate">
              <DatePicker v-model="hksjsaleDate" :options="repayFormOptions" style="width:100%" type="date" :value="repayForm.repayDate" :placeholder="$t('m.repayTime')" format="yyyy-MM-dd HH:mm:ss" @on-change="handleRepayDate"></DatePicker>
            </FormItem>
            <FormItem :label="$t('m.repayClu')" prop="repayChannelId">
              <Select v-model="repayChannelSelectArr" class="w220 mr10 mb10" @on-change="repayChannelSelect">
                <Option :value="'111'" :label="this.$t('m.Tōngguòyínhángkǎhuánkuǎn')">{{ $t('m.Tōngguòyínhángkǎhuánkuǎn') }}</Option>
                <Option :value="'222'" :label="this.$t('m.tōngguòdiànzǐqiánbāohuánkuǎn')">{{ $t('m.tōngguòdiànzǐqiánbāohuánkuǎn') }}</Option>
              </Select>
            </FormItem>
            <FormItem :label="$t('m.ynclear')" prop="payOff" v-show="!isRepayExtend">
              <RadioGroup v-model="repayForm.payOff">
                <Radio :label="0">{{$t('m.no')}}</Radio>
                <Radio :label="1">{{$t('m.yes')}}</Radio>
                <!-- <Radio :label="null">{{$t('m.bùxuǎnzé')}}</Radio> -->
              </RadioGroup>
            </FormItem>
            <FormItem label="1上传凭证" prop="uploadLists">
              <span slot="label" class="ivu-form-label">
                {{this.$t('m.uploadE')}}
                <Poptip trigger="hover" placement="right">
                  <Icon type="ios-help-circle" size="15"></Icon>
                  <div slot="content" style="text-align:left;">
                    <p>{{this.$t('m.rOne')}}</p>
                    <p>{{this.$t('m.rTwo')}}</p>
                  </div>
                </Poptip>
              </span>
              <template v-if="uploadStatus == 'finished' && !uploadPending">
                <div class="upload-list" v-for="(item, index) in uploadList" :key="index">
                  <img :src="item">
                  <div class="upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(index)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
                  </div>
                </div>
              </template>
              <template v-if="uploadStatus == 'start' && uploadPending">
                <div class="upload-list">
                  <Progress status="success" :percent="uploadPercent" hide-info></Progress>
                </div>
              </template>
              <Upload ref="upload" :show-upload-list="false" :format="['jpg','jpeg','png']" :before-upload="handleBeforeUpload" accept="image/jpeg, image/png" type="drag" action style="display: inline-block;width:58px;">
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
            </FormItem>
            <FormItem :label="$t('m.remark')">
              <Input type="textarea" :placeholder="$t('m.inputRemark')" required v-model.trim="repayForm.remark"></Input>
            </FormItem>
            <FormItem>
              <Button type="primary" :loading="repaySpin" @click="handleRepaySubmit2()">
                <span v-if="!repaySpin">{{$t('m.submit')}}</span>
                <span v-else>提交中…</span>
              </Button>
              <Button @click="handleRepayReset('repayForm')" style="margin-left: 10px">{{this.$t('m.recycle')}}</Button>
            </FormItem>
          </Form>
        </TabPane>
        <TabPane :label="$t('m.huánkuǎnjípíngzhànglìshǐ')" name="withhold">
          <Table border :columns="RepaymentHistoryTableTitle" :data="RepaymentHistoryTableData">
            <template slot-scope="{ row }" slot="name">
              <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button v-if="row.status == 'S'" type="warning" @click="RepaymentHistoryTableDataRepeal(row.userId,row.orderGid,row.orderRepayGid)">Delete</Button>
              <span v-else>{{$t('m.yǐchèxiāo')}}</span>
            </template>
          </Table>
        </TabPane>
      </Tabs>
    </Modal>
    <!-- 线下还款 end-->

    <!-- 线下还款 预览上传图片 -->
    <Modal :title="this.$t('m.yùlǎntúpiàn')" v-model="previewVisible" class="proofimg-modal">
      <img :src="previewImage" v-if="previewImage" class="proofimg-pic">
      <p class="no-img" v-else>{{$t('m.zànwútúpiàn')}}</p>
    </Modal>
    <!-- end -->

    <!-- 订单详情 预览凭证 -->
    <Modal :title="this.$t('m.chákànpíngzhèng')" class="proofimg-modal" width="390" :class="{ 'preview_img': previewImg }" v-model="previewProofImgs" @on-cancel="handleProofImgsCancel">
      <template v-if="proofImgsArr.length > 0">
        <div v-for="(item, index) in proofImgsArr" :key="index">
          <p class="proofimg-labels" v-if="proofImgsArr.length > 1">
            <span class="proofimg-label">{{ index + 1 }}</span>
          </p>
          <img id="proofimg-pic" :src="item" style="width:100%;height:100%;
                display: block;">
          <Divider v-if="proofImgsArr.length !== (index+1)" />
        </div>
        <button id="button" @click="mmm">{{$t('m.xuánzhuǎn')}}</button>
        <button id="button" @click="isPreviewImg" v-if="previewImg">{{$t('m.suōxiǎo')}}</button>
        <button id="button" @click="isPreviewImg" v-else>{{$t('m.fàngdà')}}</button>
      </template>
      <template v-else>
        <p class="no-img">{{$t('m.zànwútúpiàn')}}</p>
      </template>
    </Modal>

    <!-- 修改打款状态借款 -->
    <Modal v-model="rLstateSetState" :title="$t('m.setting')" @on-ok="rLstateSetOk" @on-cancel="rLstateSetCancel">
      <p style="font-size: 12px; margin-bottom: 10px;">{{row.orderCheckingStatus === 'reject_machine' ? this.$t('m.descriptMachine') : this.$t('m.descriptFailure')}}</p>
      <p style="font-size: 12px;">{{row.orderCheckingStatus === 'reject_machine' ? this.$t('m.statusPreliminary') : this.$t('m.statusFinal')}}</p>
    </Modal>
    <Modal v-model="baseInfoBox" class="baseInfo_box_title" :title="$t('m.sUI')" width="70%">
      <base-info :userId="baseInfoUserId" :orderGid="baseInfoOrderGid" :baseType="baseInfoType" v-if="baseInfoBox"></base-info>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import lrz from "lrz";
import { mapGetters } from "vuex";
import { dateFormat } from "@/static/tools";
import mixins from "@/libs/mixins";
import orderPoptip from "./components/order-poptip";
import batchModal from "./components/batch-submit";
import orderDetailModal from "./components/order-detail";
import BaseInfo from "@/components/common/baseInfo";

export default {
  name: "orderList",
  mixins: [mixins],
  components: {
    batchModal,
    orderPoptip,
    orderDetailModal,
    BaseInfo
  },
  data () {
    const validateLimit = (rule, value, callback) => {
      const { shouldRepayMoney } = this.detailPayment;

      if (value > shouldRepayMoney) {
        callback(new Error("代扣还款金额不得超过待还金额"));
      }
      {
        callback();
      }
    };
    const validateLength = (rule, value, callback) => {
      const { orderNo } = this.repayForm;
      let len = orderNo.length;

      // 交易单号 31位、32位、28位
      if (len !== 28 && len !== 31 && len !== 32) {
        callback(new Error("请核对交易单号或者商户单号"));
      } else {
        callback();
      }
    };
    const validateDate = (rule, value, callback) => {
      const reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/;

      if (!reg.test(value)) return;
      // return :callback(new Error(`OCR识别时间【${value}】格式错误，请校对还款时间`))
      callback();
    };
    const validateRepayExtend = (rule, value, callback) => {
      if (this.isRepayExtend) {
        if (value <= 0) return callback(new Error("请选择展期天数"));
        callback();
      } else {
        callback();
      }
    };
    const validateWithholdExtend = (rule, value, callback) => {
      if (this.isWithholdExtend) {
        if (value <= 0) return callback(new Error("请选择展期天数"));
        callback();
      } else {
        callback();
      }
    };
    return {
      //  初审人员
      firstList: [],
      //  终审人员
      lastList: [],
      //  用户等级
      userDataClass: [],
      countryName:'',
      time1: [],
      time2: [],
      time3: [],
      baseInfoBox: false,
      baseInfoType: "1",
      row: {},
      search: {
        phone: "",
        levelId: "",
        isFirst: "",
        checkerFirst: "",
        checkerFinal: "",
        orderCheckingStatus: "",
        orderStatusLoan: ""
      },
      orderCheckingStatusObj: {
        'checking_machine': this.$t("m.checking_machine"),
        'reject_machine': this.$t("m.jīshěnjùjué"),
        'waiting_to_pick': this.$t("m.waiting_to_pick"),
        'checking_first': this.$t("m.checking_first"),
        'reject_first': this.$t("m.reject_first"),
        'hanging_first': this.$t("m.hanging_first"),
        'pass_first': this.$t("m.pass_first"),
        'checking_final': this.$t("m.checking_final"),
        'pass': this.$t("m.pass"),
        'reject_final': this.$t("m.reject_final"),
      },
      RepaymentHistoryTableDataStatus: {
        P: this.$t("m.jìnxíngzhōng"),
        S: this.$t("m.chénggōng"),
        F: this.$t("m.shībài"),
        C: this.$t("m.cancel")
      },

      repaymentStatusArray: {
        repayNo: this.$t("m.wèihuánkuǎn"),
        preRepaid: this.$t("m.wèijiéqīng"),
        repaid: this.$t("m.yǐjiéqīng")
      },
      loadStateArr: {
        paying: this.$t("m.paying"),
        paySuccess: this.$t("m.dǎkuǎnchénggōng"),
        payFail: this.$t("m.dǎkuǎnshībài"),
        payCancel: this.$t("m.guānbìdǎkuǎn")
      },
      RepaymentHistoryTableTitle: [
        {
          title: this.$t("m.huánkuǎnpíngzhàngshíjiān"),
          key: "timePay",
          align: "center"
        },
        {
          title: this.$t("m.shíjìhuánkuǎnjīné"),
          key: "payAmount",
          align: "center"
        },
        {
          title: this.$t("m.jiǎnmiǎnjīné"),
          key: "reductionAmount",
          align: "center"
        },
        {
          title: this.$t("m.status"),
          key: "status",
          align: "center",
          render: (h, params) => {
            const { status } = params.row;
            return h("span", this.RepaymentHistoryTableDataStatus[status]);
          }
        },
        {
          title: this.$t("m.bèizhù"),
          key: "remark",
          align: "center"
        },
        {
          title: this.$t("m.operate"),
          slot: "action",
          width: 150,
          align: "center"
        }
      ],

      RepaymentHistoryTableData: [],
      orderColumns: [

        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: "left"
        },
        {
          title: this.$t("m.applyTime"),
          key: "timeOrder",
          width: 80,
          align: "center",
          className: "column-sapce",
          fixed: "left"
        },
        {
          title: this.$t("m.userNumber"),
          key: "userId",
          width: 100,
          align: "center",
          className: "column-sapce"
        },
        {
          title: this.$t("m.xingming"),
          key: "fullName",
          width: 100,
          align: "center",
          className: "column-sapce"
        },
        {
          title: this.$t("m.shoujihao"),
          key: "phone",
          width: 100,
          align: "center",
          className: "column-sapce"
        },
        {
          title: this.$t("m.userType"),
          key: "isFirst",
          width: 100,
          align: "center",
          className: "column-sapce",
          render: (h, param) => {
            const {
              row: { isFirst }
            } = param;

            return h(
              "div",
              isFirst === 1 ? this.$t("m.shǒucìjièkuǎn") : this.$t("m.Ngàymai")
            );
          }
        },
        {
          title: this.$t("m.yònghùděngjí"),
          key: "levelName",
          width: 100,
          align: "center",
          className: "column-sapce"
        },
        {
          title: this.$t("m.loanMount"),
          key: "loanAmount",
          width: 100,
          align: "center",
          className: "column-sapce",
          render: (h, param) => {
            return h("div", this.formatTreeMount(param.row.loanAmount));
          }
        },
        {
          title: this.$t("m.mtc"),
          align: "center",
          width: 100,
          className: "column-sapce",
          render: (h, params) => {
            const { serviceFee, interest } = params.row;
            return h("div", [
              h(orderPoptip, {
                props: {
                  text: this.formatTreeMount((serviceFee || 0) + (interest || 0)),
                  content: [
                    {
                      key: this.$t('m.ServiceCharge'),
                      value: this.formatTreeMount(serviceFee)
                    },
                    {
                      key: this.$t("m.Interest"),
                      value: this.formatTreeMount(interest)
                    }
                  ]
                }
              })
            ]);
          }
        },
        {
          title: this.$t("m.InterestPenalties"),
          key: "interestFine",
          width: 100,
          align: "center",
          className: "column-sapce"
        },
        {
          title: this.$t("m.ApprovalStatus"),
          slot: "orderCheckingStatus",
          width: 100,
          align: "center",
          className: "column-sapce"
        },
        {
          title: this.$t("m.Firstinstance"),
          key: "checkerFirst",
          width: 100,
          align: "center",
          className: "column-sapce"
        },
        {
          title: this.$t("m.Finalreviewer"),
          key: "checkerFinal",
          width: 100,
          align: "center",
          className: "column-sapce"
        },
        {
          title: this.$t("m.rLt"),
          key: "timePay",
          width: 80,
          align: "center",
          className: "column-sapce"
        },
        {
          title: this.$t("m.sptime"),
          key: "dueDate",
          align: "center",
          width: 100,
          className: "column-sapce"
        },
        {
          title: this.$t("m.OrderStatus"),
          key: "orderStatusLoan",
          align: "center",
          width: 100,
          className: "column-sapce",
          render: (h, param) => {
            const {
              row: { orderStatusLoan }
            } = param;
            if (
              orderStatusLoan &&
              orderStatusLoan !== "none" &&
              orderStatusLoan !== "null"
            ) {
              const str = "m." + orderStatusLoan;
              return h("div", this.$t(str));
            }
            return h("div", "");
          }
        },
        {
          title: this.$t("m.ynOverdue"),
          key: "hasOverDue",
          align: "center",
          width: 100,
          className: "column-sapce",
          render: (h, param) => {
            const {
              row: { overDueDays }
            } = param;
            return h(
              "div",
              overDueDays === 0 ? this.$t("m.no") : this.$t("m.yes")
            );
          }
        },
        {
          title: this.$t("m.overdueDay"),
          key: "overDueDays",
          align: "center",
          width: 100,
          className: "column-sapce"
        },
        {
          title: this.$t("m.orderGid"),
          key: "orderGid",
          width: 120,
          align: "center",
          className: "column-sapce",
          // fixed: "left"
        },
        {
          title: this.$t("m.operate"),
          align: "center",
          width: 150,
          fixed: "right",
          className: "column-space",
          render: (h, params) => {
            const {
              id,
              orderGid,
              userId,
              repaymentState,
              remainingRepaidAmount,
              orderCheckingStatus,
            } = params.row;

            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    long: true
                  },
                  style: {
                    marginBottom: "10px",
                    display: orderCheckingStatus === 'pass' ? 'block' : 'none'
                  },
                  on: {
                    click: () => {
                      this.getOrderInfo(userId, orderGid);
                    }
                  }
                },
                this.$t("m.oDetails")
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                    long: true
                  },
                  style: {
                    marginBottom: "10px",
                    display:
                      repaymentState !== 1 && this.isShowSetting
                        ? "block"
                        : "none"
                  },
                  on: {
                    click: () => {
                      this.getBankInfo(params.row);
                    }
                  }
                },
                this.$t("m.userDetails")
              ),
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small",
                    long: true
                  },
                  style: {
                    display:
                      orderCheckingStatus === "reject_machine" ||
                        orderCheckingStatus === "reject_first"
                        ? "block"
                        : "none"
                  },
                  on: {
                    click: () => {
                      this.rLstateSet(params.row);
                    }
                  }
                },
                this.$t("m.setting")
              )
            ]);
          }
        }
      ],

      rLstateSetState: false,
      repayChannelSelectArr: "",
      rLstateSetSelectData: "",
      repaymentStatus: "",
      dueStatus: "",
      remainingRepaidAmountSet: "",
      orderGidSet: "",
      deg: 0,
      model1: "",
      modal11: false,
      hksjsaleDate: "",
      orderGidReturnObj: "",
      data1: [],
      success: "",
      failedList: "",

      cityList: [
        {
          value: "offline",
          label: "通过线下银行卡转账"
        },
        {
          value: "store",
          label: "通过便利店"
        },
        {
          value: "online",
          label: "线上通过支付通道"
        }
      ],
      evidenceUrl: "",
      // title:'',

      oderGid1: "",
      fileName: "",
      imgData: "",

      role: "",
      orderNum: "",
      name: "",
      cellphone: "",
      phone: "",
      loanDay: -1,
      loanState: -1,
      // repaymentState: -1,
      payOff: "",
      overdue: "",
      paymentStatus: "",
      isYuqi: "-1",
      isExtend: -1,
      platform: "all",
      beginTimeOrder: "",
      endTimeOrder: "",
      beginPassTime: "",
      endPassTime: "",
      beginDueDate: "",
      endDueDate: "",
      orderList: [],
      detailPayment: {
      },
      loan_list_size: 1,
      disDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
      disDate1: {
        disabledDate (date) {
          // return date && date.valueOf() > Date.now();
        }
      },
      repayModal: false,
      repayForm: {
        repayAmount: "",
        reductionAmount: "",
        repayDate: "",
        payOff: 0,
        remark: "",
        repayChannelId: "",
        repayChannelName: ""
      },
      repayRules: {
        repayAmount: [
          {
            required: true,
            type: "number",
            message: this.$t("m.qǐngshūrùhuánkuǎnjīné"),
            trigger: "blur"
          }
        ],
        reductionAmount: [
          {
            required: true,
            type: "number",
            message: this.$t("m.qǐngshūrùjiǎnmiǎnjīné"),
            trigger: "blur"
          }
        ],
        uploadLists: [
          {
            required: false,
            type: "array",
            min: 1,
            message: this.$t("m.qǐngshàngchuánhuánkuǎnpíngzhèng"),
            trigger: "change"
          }
        ]
      },
      repayPayOff: false,
      remark: "",
      previewVisible: false,
      previewImage: "",
      uploadList: [],
      repaySpin: false,
      previewImg: false,
      withholdForm: {
        money: "",
        bankCardId: "",
        payOff: 0,
        isExtend: 0,
        extendDays: 0,
        isLock: 0
      },
      withholdSpin: false,
      withholdPayOff: false,
      bankList: [],
      repayTab: "repay",
      page: 1,
      pageSize: 10,
      investorId: "",
      investorList: [],
      loanProductNo: "",
      loanProductNoList: [],
      rloading: true,
      // 发回

      // -----------------------
      rdata: [],
      rcolumns: [
        {
          title: this.$t("m.repayTime"),
          key: "timePay",
          align: "center",
          render: (h, params) => {
            return h(
              "span",
              params.row.timePay == "" ? params.row.utime : params.row.timePay
            );
          }
        },

        {
          title: this.$t("m.huánkuǎnhàomǎ"),
          key: "accountNo",
          align: "center"
        },
        {
          title: this.$t("m.repayMuch"),
          key: "payAmount",
          align: "center"
        },
        {
          title: this.$t("m.repayClu"),
          key: "payChannelName",
          align: "center",
          render: (h, params) => {
            const { payChannelName, repayIsAuto } = params.row;
            let text;
            if (repayIsAuto == 0) {
              text = payChannelName + "   (" + this.$t("m.shǒudòng") + ")";
            } else {
              text = payChannelName;
            }

            // if (payChannelName == 'Gcash')
            return h("span", text);
          }
        },
        {
          title: this.$t("m.repayCreat"),
          key: "status",
          align: "center",
          render: (h, params) => {
            const { status } = params.row;
            let text;

            if (status == "S") {
              text = this.$t("m.chénggōng");
            } else if (status == "P") {
              text = this.$t("m.jìnxíngzhōng");
            } else if (status == "F") {
              text = this.$t("m.shībài");
            } else if (status == "C") {
              text = this.$t("m.cancel");
            }
            return h("span", text);
          }
        },
        {
          title: this.$t("m.repayRemark"),
          key: "remark",
          align: "center"
          // render: (h, params) => {
          // 	const { remark, isExtend } = params.row;
          // 	return h('p', isExtend == 1 ? `【展期】${remark}` : remark)
          // }
        },
        {
          title: this.$t("m.repayCre"),
          key: "payEvidenceUrl",
          align: "center",
          render: (h, params) => {
            const { payEvidenceUrl } = params.row;
            let isHide =
              payEvidenceUrl == "" ||
              payEvidenceUrl == null ||
              payEvidenceUrl == undefined;
            let ispayEvidenceUrl =
              isHide == true ? this.$t("m.wúpíngzhèng") : this.$t("m.chákàn");

            if (isHide) {
              return h("span", ispayEvidenceUrl);
            } else {
              return h(
                "div",
                {
                  style: {
                    paddingTop: "5px",
                    paddingBottom: "5px"
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "primary"
                      },
                      style: {
                        marginRight: "10px",
                        display: isHide ? "none" : "inline-block"
                      },
                      on: {
                        click: () => {
                          this.handlePreviewRecordImage(payEvidenceUrl);
                        }
                      }
                    },
                    ispayEvidenceUrl
                  )
                ]
              );
            }
          }
        }
      ],
      exloading: true,
      exdata: [],
      repayFormOptions: {
        shortcuts: [
          {
            text: "Today",
            value () {
              return new Date();
            },
            onClick: () => { }
          }
        ]
      },
      uploadStatus: "",
      uploadPercent: 0,
      uploadPending: false,
      previewProofImgs: false, // 详情查看凭证弹窗
      proofImgsArr: [], // 详情查看凭证图片数组
      repayWayList: [], // 线下还款方式数组
      extendDaysList: [], // 展期天数数组
      repayExtendInfo: "", // 线下还款展期费用
      withholdExtendInfo: "", // 代扣展期费用
      originalExtendFee: "", // 展期原始费用
      newDeadLine: "", // 展期新到期日
      repaymentStateArray: ["未还", "结清", "", "未结清"],
      repayChannelSelectArray: [
        { key: "111", value: this.$t("m.Tōngguòyínhángkǎhuánkuǎn") },
        { key: "222", value: this.$t("m.tōngguòdiànzǐqiánbāohuánkuǎn") }
      ],

      orderLoading: true,
      detailsVisible: false,
      batchVisible: false,
      batchData: [],
      // 日期限制
      repayFormOptions: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      }
    };
  },
  created () {
    this.countryName = localStorage.getItem("x-countryName")
    this.role = Number(localStorage.getItem("type"));
    if (this.type == 0) {
      this.orderColumns.unshift({
        type: "selection",
        width: 40,
        align: "center"
      });
    }
  },
  mounted () {
    // 	this.getLoanProductsList();
    // 	this.getAllInverstorList();
    this.handleFilterReset();
    this.getFirstUserList();
    this.getLastUserList();
    this.userDataQuery();
  },
  computed: {
    title: function () {
      return this.$t(this.$i18n.locale);
    },
    // ...mapGetters([
    //   'type'
    // ]),
    isRepayExtend () {
      return !!this.repayForm.isExtend;
    },
    isWithholdExtend () {
      return !!this.withholdForm.isExtend;
    },
    isShowSetting () {
      return (
        this.role == 0 || this.role == 1 || this.role == 4 || this.role == 22
      );
    }
  },
  methods: {
    // 获取用户详情
    async userDataQuery (v = false) {
      var url = "/api/laocai/userLevel/list?&pageSize=100&pageNumber=1";
      const { body } = await this.$http.get(url);
      const { code, result } = body;
      if (code == 0 && result) {
        let Class = [];
        const list = result.list || [];
        for (const key in list) {
          Class.push({
            levelId: list[key].levelId,
            levelName: list[key].levelName
          });
        }
        this.userDataClass = [...new Set(Class)];
      }
    },
    //  用户信息详情中的功能
    getBankInfo (row) {
      const { userId, orderGid } = row;
      this.baseInfoBox = true;
      this.baseInfoUserId = userId;
      this.baseInfoOrderGid = orderGid;
    },

    onCancelDetailModal (hasLoad) {
      this.detailsVisible = false;
      hasLoad && this.getCreditOrderList();
    },
    emptyQueryInfo () {
      this.orderNum = "";
      this.name = "";
      this.phone = "";
      this.paymentStatus = "";
      this.repaymentStatus = "";
      this.overdue = null;
      this.beginTimeOrder = "";
      this.endTimeOrder = "";
      this.beginPassTime = "";
      this.endPassTime = "";
      this.beginDueDate = "";
      this.endDueDate = "";
      this.time1 = [];
      this.time2 = [];
      this.time3 = [];
      this.search = Object.assign(
        {},
        {
          phone: "",
          levelId: "",
          isFirst: null,
          checkerFirst: "",
          checkerFinal: "",
          orderCheckingStatus: null,
          orderStatusLoan: null
        }
      );
    },

    hksjsaleDateEvent () {
      var d = new Date();
      let y = d.getFullYear(); // 年份
      let m = (d.getMonth() + 1).toString().padStart(2, "0"); // 月份
      let r = d
        .getDate()
        .toString()
        .padStart(2, "0"); // 日子
      let h = d
        .getHours()
        .toString()
        .padStart(2, "0"); // 小时
      let mm = d
        .getMinutes()
        .toString()
        .padStart(2, "0"); // 分钟
      let ss = d
        .getSeconds()
        .toString()
        .padStart(2, "0"); // 秒
      this.hksjsaleDate = `${y}-${m}-${r} ${h}:${mm}:${ss}`; // es6 字符串模板
      this.repayForm.repayDate = this.hksjsaleDate;
    },
    repayChannelSelect (e) {
      let arr = this.repayChannelSelectArray;
      for (const key in arr) {
        if (arr[key].key == e) {
          this.repayForm.repayChannelId = arr[key].key;
          this.repayForm.repayChannelName = arr[key].value;
        }
      }
    },

    rLstateSet (row) {
      const { orderGid, userId } = row;
      this.row = row;
      this.orderGid = orderGid;
      this.userId = userId;
      this.rLstateSetSelectData = "";
      this.rLstateSetState = true;
    },

    rLstateSetOk () {
      this.$http
        .post("/api/laocai/check/forceChange/pass", {
          orderGid: this.orderGid
          // userId: this.userId,
          // statusLoan: this.rLstateSetSelectData
        })
        .then(res => {
          if (res.body.code == 0) {
            this.getCreditOrderList();
            this.$Message.success(this.$t("m.errorCode" + res.body.code));
          } else {
            this.$Message.error(this.$t("m.errorCode" + res.body.code));
          }
        });
    },
    rLstateSetCancel () { },

    mmm () {
      this.deg = this.deg + 90;
      document.getElementById("proofimg-pic").style.transform =
        "rotate(" + this.deg + "deg)";
    },
    isPreviewImg () {
      this.previewImg = !this.previewImg;
    },
    ok () {
      this.$Message.info("点击了确定");
    },
    cancel () {
      this.$Message.info(this.$t("m.cancel"));
    },
    // 拨回
    getOrderBohui () {
      this.$http
        .post("/api/laocai/order/callback", {
          orderGids: this.batchData
        })
        .then(res => {
          if (res.body.code == 0) {
            if (res.body.result) {
              this.orderGidReturnObj = res.body.result;
              // alert(this.mylist.error)
            }
            this.modal11 = true
            this.$Message.success('成功 ' + res.body.result.success + '失败 ' + res.body.result.failedList);
          }
        });
    },
    detailsVisibleReturn (v) {
      this.$http
        .post("/api/laocai/order/callback", {
          orderGids: [v]
        })
        .then(res => {
          this.modal11 = true;
          if (res.body.code == 0) {
            if (res.body.result) {
              this.orderGidReturnObj = res.body.result;
            }
            this.detailsVisible = false;
            this.getCreditOrderList();
            this.getOrderInfo(v);
            this.modal11 = true
            this.$Message.success('成功 ' + res.body.result.success + '失败 ' + res.body.result.failedList);
          } else {
            this.$Message.warning(this.$t("m.errorCode" + res.body.code));
          }
        });
    },
    handleRepaySubmit2 () {
      this.repaySpin = true;
      if (
        this.repayForm.repayAmount !== undefined &&
        this.repayForm.repayAmount !== "" &&
        this.repayForm.reductionAmount !== undefined &&
        this.repayForm.reductionAmount !== ""
      ) {
        this.$http
          .post("/api/laocai/order/repayment/background-confirm", {
            userId: this.userId,
            orderGid: this.orderGidSet,
            evidenceUrl: this.evidenceUrl,
            repayAmount: this.repayForm.repayAmount,
            reductionAmount: this.repayForm.reductionAmount,
            timeRepay: this.repayForm.repayDate,
            payOff: this.repayForm.payOff,
            remark: this.repayForm.remark,
            repayChannelId: this.repayForm.repayChannelId,
            repayChannelName: this.repayForm.repayChannelName
          })
          .then(res => {
            if (res.body.code == 0) {
              this.repayModal = false;
              this.repaySpin = false;
              this.getCreditOrderList();
              this.$Message.success(this.$t("m.errorCode" + res.body.code));
            } else {
              this.repaySpin = true;
              this.$Message.warning(this.$t("m.errorCode" + res.body.code));
              setTimeout(() => {
                this.repaySpin = false;
              }, 2000);
            }
          })
          .catch(error => {
            this.repaySpin = false;
          });
      } else {
        this.repaySpin = false;
        this.$Message.error(
          this.$t("m.qǐngshūrùjiǎnmiǎnjīné"),
          this.$t("m.qǐngshūrùhuánkuǎnjīné")
        );
      }
    },
    //  获取初审人员列表
    async getFirstUserList () {
      const { data } = await this.$http.get(
        "/api/laocai/sys/account/list?roleName=checker&enable=1"
      );
      const { code, result } = data;
      if (code === 0) {
        this.firstList = result.list || [];
      } else {
        this.firstList = [];
      }
    },
    //  获取终审人员列表
    async getLastUserList () {
      const { data } = await this.$http.get(
        "/api/laocai/sys/account/list?roleName=admin&enable=1"
      );
      const { code, result } = data;
      if (code === 0) {
        this.lastList = result.list || [];
      } else {
        this.lastList = [];
      }
    },
    getCreditOrderList () {
      let param = {
        ...this.search
      };
      let query = "";
      param.pageNumber = this.page || 1;
      param.pageSize = this.pageSize;
      // param.repaymentStatus = this.repaymentStatus;
      param.orderGid = this.orderNum;

      // param.paymentStatus=this.paymentStatus
      // param.paymentStatus = this.paymentStatus;
      param.payOff = this.payOff;
      param.overdueStatus = this.overdue;

      // 下单时间
      param.beginTimeOrder = this.beginTimeOrder;
      param.endTimeOrder = this.endTimeOrder;

      // 打款时间
      param.beginTimePay = this.beginPassTime;
      param.endTimePay = this.endPassTime;

      // 应还时间
      param.beginDueDate = this.beginDueDate;
      param.endDueDate = this.endDueDate;

      param.fullName = this.name;
      param.userId = this.userId;
      param.repaymentState = this.repaymentState;
      // param.payOff = this.payOff
      Object.keys(param).forEach((item, index) => {
        if (param[item] && param[item] !== ",") {
          query += `${index === 0 ? "" : "&"}${item}=${param[item]}`;
        }
      });
      var url1 = `/api/laocai/order/list?${query}`;
      this.orderLoading = true;
      this.$http.get(url1).then(
        res => {
          if (res.body.code == 0) {
            if (!res.body.result) {
              this.orderLoading = false;
              this.orderList = [];
            } else {
              this.orderList = res.body.result.list;
              this.detailPayment = res.body.result.list || {};
              this.orderLoading = false;
              this.loan_list_size = res.body.result.size;
              for (const key in this.orderList) {
                if (this.orderList[key].orderStatusLoan !== "pay_fail") {
                  this.orderList[key]["_disabled"] = true;
                }
              }
            }
          } else {
            this.detailPayment = {};
            this.orderLoading = false;
          }
          this.$Message.success(this.$t("m.errorCode" + res.body.code));
        },
        error => { }
      );
    },

    hksjsaleDateEventHistory (userId, orderGid) {
      this.$http
        .get(
          "/api/laocai/order/repayment/list?repayIsAuto=0&orderGid=" +
          orderGid +
          "&userId=" +
          userId
        )
        .then(res => {
          if (res.body.code == 0) {
            this.RepaymentHistoryTableData = res.body.result;
          } else {
            this.$Message.warning(this.$t("m.errorCode" + res.body.code));
          }
        });
    },
    RepaymentHistoryTableDataRepeal (userId, orderGid, orderRepayGid) {
      this.$http
        .post("/api/laocai/order/repayment/callback", {
          orderGid: orderGid,
          userId: userId,
          orderRepayGid: orderRepayGid
        })
        .then(res => {
          if (res.body.code == 0) {
            this.$Message.success(this.$t("m.chénggōng"));
            this.hksjsaleDateEventHistory(userId, orderGid);
            this.getCreditOrderList();
            this.repayModal = false;
          } else {
            this.$Message.warning(this.$t("m.errorCode" + res.body.code));
          }
        });
    },

    async getOrderInfo (userId, orderGid) {
      //获取订单详情 操作详情
      this.detailsVisible = true;
      this.rloading = false;
      this.exloading = false;

      await this.$http
        .get(
          "/api/laocai/order/info?orderGid=" + orderGid + "&userId=" + userId
        )
        .then(res => {
          this.detailPayment = {};
          if (res.body.code == 0) {
            this.detailPayment = res.body.result || {};
          } else {
            this.$Message.warning(this.$t("m.errorCode" + res.body.code));
          }
        });
      await this.$http
        .get(
          "/api/laocai/order/repayment/list?orderGid=" +
          orderGid +
          "&userId=" +
          userId
        )
        .then(res => {
          this.rdata = res.body.result || [];
          this.repayWayList = res.body.result;
          // 设置的 弹出中的还款方式下拉框
          // this.repayForm.repayWay=res.body.result
        });
      // this.detailPayment = detailsArr[0].info;
      // this.rdata = detailsArr[1];
      // this.exdata = detailsArr[2];
      this.rloading = false;
      this.exloading = false;
    },

    handleRepayDate (e) {
      this.repayForm.repayDate = e;
    },
    timeChange (e) {
      if (typeof e == "undefined") {
        this.beginTimeOrder = e[0];
      } else if (typeof e == "object") {
        this.beginTimeOrder = e[0];
        this.endTimeOrder = e[1];
        this.getCreditOrderList();
      }
    },
    passTimeChange (e) {
      if (typeof e == "undefined") {
        this.beginPassTime = e[0];
      } else if (typeof e == "object") {
        this.beginPassTime = e[0];
        this.endPassTime = e[1];
        this.getCreditOrderList();
      }
    },
    expireChange (e) {
      if (typeof e == "undefined") {
        this.beginDueDate = e[0];
      } else if (typeof e == "object") {
        this.beginDueDate = e[0];
        this.endDueDate = e[1];
        this.getCreditOrderList();
      }
    },
    pageChange (e) {
      this.page = e;
      this.getCreditOrderList();
    },
    // 每页显示数量
    handleSizeChange (val) {
      this.pageSize = val;

      this.getCreditOrderList();
    },
    // 平帐按钮
    handleSet (orderGid, userId, remainingRepaidAmount) {
      this.repayForm = {
        payOff: 0
      };
      (this.evidenceUrl = ""), (this.uploadList = []);
      this.hksjsaleDateEvent();
      this.hksjsaleDateEventHistory(userId, orderGid);
      this.repayModal = true;
      this.orderGidSet = orderGid;
      this.userId = userId;
      this.remainingRepaidAmountSet = remainingRepaidAmount;
    },
    // 线下还款 选择展期天数
    handleRepaySelect (val) {
      const { repayForm } = this.$refs;
      if (!val) return repayForm.resetFields();
      const { extendSupportDays, orderExtendOptions } = this.detailPayment;
      let fee = "";
      orderExtendOptions.forEach(item => {
        if (item.extendDays === val) {
          fee = item.originalExtendFee;
        }
      });

      this.repayExtendInfo = `原始展期费用为${fee}元`;
    },
    // 线下还款 提交

    // 线下还款重置
    handleRepayReset (name) {
      this.uploadList = [];
      this.repayPayOff = false;
      // this.$refs[name].resetFields();
    },
    // 预览图片
    handleView (index) {
      this.previewImage = this.uploadList[index];
      this.previewVisible = true;
    },
    // 删除图片
    handleRemove (index) {
      this.uploadList.splice(index, 1);
    },
    compress (image, width, height, ratio) {
      let canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;
      let g = canvas.getContext("2d");
      g.drawImage(image, 0, 0, width, height);
      return canvas.toDataURL("image/jpeg", ratio);
    },
    handleBeforeUpload (file) {
      const reg = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
      const limit5 = file.size / 1024 / 1024 < 1;
      const check = this.uploadList.length < 1;

      if (!reg.test(file.type)) {
        this.$Message.error(
          this.$t("m.zhǐnéngshàngchuánjpgjpegpnggéshìdetúpiàn")
        );
        return false;
      }
      if (!limit5) {
        this.$Message.error(this.$t("m.shàngchuándetúpiànbùnéngchāoguò1MB"));
        return false;
      }
      if (!check) {
        this.$Message.error(this.$t("m.zuìduōshàngchuán1zhāngtúpiàn"));
        return false;
      }

      this.uploadPercent = 0;
      this.uploadStatus = "start";
      this.uploadPending = true;

      // 压缩图片
      lrz(file)
        .then(res => {
          const { base64 } = res;
          const { fileName } = res;
          this.uploadPercent = 10;
          this.fileName = fileName;
          // this.evidenceUrl= evidenceUrl

          // 在file打印的时候打印畜类 img的所有信息，在file打印的时候打印file.name就可以拿到哦图片名
          // BAIDU OCR
          this.$http
            .put("/api/laocai/helper/upload/image", {
              imgData: base64,
              // file:file.name
              fileName: file.name
            })
            .then(
              res => {
                if (res.body.code == 0) {
                  // this.uploadPercent = 100;
                  // this.repayForm.money = parseFloat(res.body.money);
                  // this.repayForm.repayDate = res.body.time;
                  // this.repayForm.orderNo = res.body.orderNo;
                  // this.repayForm.repayWay = res.body.payway;
                  this.uploadList.push(base64);
                  this.repayForm.uploadLists = this.uploadList;
                  this.evidenceUrl = res.body.result;
                  this.$Message.success(
                    this.$t("m.shàngchuánpíngzhèngchénggōng")
                  );
                  setTimeout(() => {
                    this.uploadPending = false;
                    this.uploadStatus = "finished";
                  }, 200);
                }
              },
              error => {
                console.log(error);
              }
            );
        })
        .catch(err => {
          this.$Message.error(this.$t("m.yāsuōtúpiànshībài"));
        })
        .always(res => { });

      return false;
    },
    // 代扣 选择展期天数
    handleWithholdSelect (val) {
      const { withholdForm } = this.$refs;
      if (!val) return withholdForm.resetFields();
      const { orderExtendOptions } = this.detailPayment;
      let extendObj = orderExtendOptions.filter(
        item => item.extendDays === val
      );
      this.originalExtendFee = extendObj[0].originalExtendFee;
      this.newDeadLine = extendObj[0].newDeadLine;
      this.withholdForm.money = extendObj[0].discountExtendFee;
    },
    // 代扣银行卡 提交
    handleWithholdSubmit (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.withholdSpin = true;
          this.$http
            .post("/helsinki/admin/order/repay-withhold", {
              orderId: this.detailPayment.id,
              userId: this.detailPayment.userId,
              money: this.withholdForm.money,
              bankCardId: this.withholdForm.bankCardId,
              isExtend: this.withholdForm.isExtend,
              extendDays: this.isWithholdExtend
                ? this.withholdForm.extendDays
                : 0,
              payOff: this.isWithholdExtend ? 0 : this.withholdForm.payOff,
              isLock: this.isWithholdExtend ? 0 : this.withholdForm.isLock
            })
            .then(
              ({ data: { errcode, info, data } }) => {
                if (errcode == 0) {
                  // this.$Message.success(info);
                  this.repayModal = false;
                  this.getCreditOrderList();
                }
                this.withholdSpin = false;
              },
              error => {
                this.withholdSpin = false;
              }
            );
        }
      });
    },
    // 代扣银行卡 重置
    handleWithholdReset (name) {
      this.withholdPayOff = false;
      this.$refs[name].resetFields();
    },
    handleTab (name) {
      // this.repayTab = name;
    },
    resetForm () {
      const { repayForm, withholdForm } = this.$refs;

      this.repayTab = "repay";
      this.uploadList = [];
      this.bankList = [];
      this.detailPayment = {};
      this.repayExtendInfo = "";
      this.originalExtendFee = "";
      this.newDeadLine = "";
      this.repayPayOff = false;
      this.withholdPayOff = false;
      repayForm.resetFields();
      withholdForm.resetFields();
    },
    // 获取查询条件里面的下拉框【直投客户列表】
    getAllInverstorList () {
      this.$http.post("/helsinki/admin/investor/getAllInvestorList").then(
        ({ data: { data, errcode, info } }) => {
          if (errcode === 0) {
            this.investorList = data.list;
            if (this.investorList.length == 1) {
              this.investorId = this.investorList[0].investorId;
            } else {
              this.investorId = -1;
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    // 获取产品列表
    getLoanProductsList () {
      this.$http.post("/helsinki/admin/loan-products").then(
        ({ data: { data, errcode, info } }) => {
          if (errcode === 0) {
            this.loanProductNoList = data.data;
            if (data.data.length == 1) {
              this.loanProductNo = this.loanProductNoList[0].loanProductNo;
            } else {
              this.loanProductNo = "all";
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    handlePreviewRecordImage (value) {
      this.proofImgsArr = value.split(";");
      this.previewProofImgs = true;
    },
    // 筛选条件
    handleFilterReset () {
      this.page = 1;
      this.getCreditOrderList();
    },
    timeFormat (stamp) {
      return dateFormat(stamp, "year");
    },
    // 订单详情 预览弹窗 取消回调
    handleProofImgsCancel () {
      this.previewProofImgs = false;
      this.proofImgsArr = [];
    },

    // 全选
    handleSelectAll (status) {
      this.$refs.orderTable.selectAll(status);
    },
    // 选中某一项触发
    handleOrderSelect (selection) {
      this.batchData = selection.map(item => item.orderGid);
    },
    // 批量代扣事件
    handleBatchWithhold () {
      this.batchVisible = true;
      this.modal11 = true;

      this.getOrderBohui();
    },
    handleBatchWithholdOk () {
      this.handleSelectAll(false);
      this.getCreditOrderList();
      this.detailsVisible = false;
      this.orderGidReturnObj = "";
    },
    // 批量代扣弹窗success回调函数
    handleBatchOk () {
      this.handleFilterReset();
    }
  },
  watch: {
    //检测v-model组件变化
    // orderNum () {
    //   this.handleFilterReset();
    // },
    // name () {
    //   this.handleFilterReset();
    // },
    // passTimeChange () {
    //   this.handleFilterReset();
    // },
    // phone () {
    //   this.handleFilterReset();
    // },
    // loanDay () {
    //   this.handleFilterReset();
    // },
    // paymentStatus () {
    //   this.handleFilterReset();
    // },
    // repaymentStatus () {
    //   this.handleFilterReset();
    // },
    // payOff () {
    //   this.handleFilterReset();
    // },
    // isYuqi () {
    //   this.handleFilterReset();
    // },
    // overdue() {
    //   this.handleFilterReset();
    // },
    isExtend () {
      this.handleFilterReset();
    },
    investorId (newVal, oldVal) {
      if (newVal !== "" && this.loanProductNo !== "") {
        this.handleFilterReset();
      }
    },
    repayModal (curVal) {
      if (!curVal) {
        // this.resetForm();
      }
    },
    loanProductNo (newVal, oldVal) {
      if (newVal !== "" && this.investorId !== "") {
        this.handleFilterReset();
      }
    },
    platform () {
      this.handleFilterReset();
    },
    // 线下还款 监听还款金额

    "repayForm.money" (newVal, oldVal) {
      const { shouldRepayMoney, isYuqi } = this.detailPayment;

      if (newVal == "") return;

      // 未逾期，结清默认为是，不可修改
      if (isYuqi == 0) {
        this.repayPayOff = true;
        this.repayForm.payOff = 1;
        this.repayForm.isLock = 0;
        return;
      }

      // 已逾期，可修改
      if (newVal >= shouldRepayMoney) {
        this.repayPayOff = true;
        this.repayForm.payOff = 1;
        this.repayForm.isLock = 0;
      } else {
        this.repayPayOff = false;
        this.repayForm.payOff = 0;
        this.repayForm.isLock = 1;
      }
    },
    // 代扣 监听还款金额
    "withholdForm.money" (newVal, oldVal) {
      const { shouldRepayMoney, isYuqi } = this.detailPayment;

      if (newVal == "") return;
      // 未逾期，结清默认为是，不可修改
      if (isYuqi == 0) {
        this.withholdPayOff = true;
        this.withholdForm.payOff = 1;
        this.withholdForm.isLock = 0;
        return;
      }

      // 已逾期，可修改
      if (newVal >= shouldRepayMoney) {
        this.withholdPayOff = true;
        this.withholdForm.payOff = 1;
        this.withholdForm.isLock = 0;
      } else {
        this.withholdPayOff = false;
        this.withholdForm.payOff = 0;
        this.withholdForm.isLock = 1;
      }
    },
    // 代扣 监听展期
    "withholdForm.isExtend" (newVal, oldVal) {
      const { discountExtendFee, shouldRepayMoney } = this.detailPayment;

      // 代扣展期
      this.withholdForm.money = newVal ? discountExtendFee : shouldRepayMoney;
    }
  },
  filters: {
    repayTypeFormatter (value) {
      switch (value) {
        case 0:
          return "主动还款";
          break;
        case 1:
          return "代扣";
          break;
        case 2:
          return "线下还款";
          break;
        default:
          return "";
          break;
      }
    },
    repayWayFormatter (value) {
      switch (value) {
        case 0:
          return "银行卡";
          break;
        case 1:
          return "支付宝";
          break;
        case 2:
          return "微信";
          break;
        default:
          return "";
          break;
      }
    },
    repayStateFormatter (value) {
      switch (value) {
        case 0:
          return "未还";
          break;
        case 1:
          return "结清";
          break;
        case 3:
          return "未结清";
          break;
        default:
          return "";
          break;
      }
    },
    dateFormatter (value) {
      return dateFormat(value, "year");
    }
  }
};
</script>

<style lang="scss">
@import "../../static/style.css";
@import "../../static/common.scss";

.order-wrapper {
  .column-space {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .search_btn {
    min-width: 100px;
    margin-right: 20px;
  }

  .operator-tools {
    margin-top: 12px;
    display: inline-block;
    button {
      margin-right: 5px;
    }
  }

  .ivu-table-cell {
    padding-left: 6px;
    padding-right: 6px;
  }

  .items {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 20px;
    width: 200px;

    .label {
      overflow: hidden;
      white-space: inherit;
      text-align: right;
      color: #222;
      font-size: 14px;
      margin-right: 10px;
    }
  }
}

.detailPayment {
  font-size: 13px;
}

.base-form {
  margin: 0 200px 0 20px;
  .ivu-form {
    .ivu-form-item-label {
      margin-bottom: 0;
    }
  }

  .ivu-form-item:last-child {
    margin-bottom: 0;
  }
}

.ivu-form-label {
  display: inline-block;
  vertical-align: middle;
}

.ivu-icon {
  vertical-align: middle;
}

.underline {
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

.upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
  font-size: 0;
  img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }
}

.upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}

.upload-list:hover .upload-list-cover {
  display: block;
}

.upload-list-cover i {
  display: inline-block;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 4px;
  vertical-align: middle;
}

.proof-images {
  margin-top: 12px;
  img {
    max-height: 300px;
  }
}

.proofimg-modal {
  .no-img {
    text-align: center;
  }
  .proofimg-labels {
    margin-bottom: 5px;
    text-align: center;
  }
  .proofimg-label {
    display: inline-block;
    font-size: 14px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    background: #2d8cf0;
    border-radius: 100%;
    text-align: center;
  }
  #proofimg-pic {
    width: 70%;
    margin: auto;
  }

  .proofimg-pic {
    display: block;
    width: 90%;
    margin: 0 auto;
  }
  .ivu-modal-wrap {
    .ivu-modal {
      .ivu-modal-body {
        overflow: hidden;
      }
    }
  }
}
.preview_img {
  .ivu-modal-wrap {
    .ivu-modal {
      width: 50% !important;
    }
  }
}

.extend-infos {
  margin-top: 2px;
  color: #ed4014;
  line-height: 16px;
}
#button {
  float: left;
  /* margin-bottom: 7px; */
  margin-top: 30px;
  /* margin-left: 281px; */
  padding: 0 10px;
  height: 38px;
  background: #dd5656;
  color: #f0efee;
  /* position: relative; */
  float: left;
  margin-bottom: 7px;
  border-radius: 6px;
  border: none;
  margin: 5px 50px;
  float: left;
}
.aaa span {
  color: #9c73ff;
  font-weight: 700;
}
.detailsVisible_Close {
  height: 30px;
}
.detailsVisible_Close h3 {
  display: inline-block;
  font-size: 20px;
}
.detailsVisible_Close button {
  float: right;
  margin-right: 50px;
}
</style>
